<nz-calendar-header [fullscreen]="nzFullscreen" [activeDate]="activeDate" [(mode)]="nzMode"
  (modeChange)="onModeChange($event)" (yearChange)="onYearSelect($event)" (monthChange)="onMonthSelect($event)">
</nz-calendar-header>

<div class="{{prefixCls}} {{prefixCls}}-full" [class.ant-fullcalendar-fullscreen]="nzFullscreen">
  <div class="{{prefixCls}}-calendar-body">
    <ng-container *ngIf="nzMode === 'month' then monthModeTable else yearModeTable"></ng-container>
  </div>
</div>

<ng-template #monthModeTable>
  <date-table [prefixCls]="prefixCls" [value]="activeDate" [dateCellRender]="dateCell"
    [dateFullCellRender]="dateFullCell" (valueChange)="onDateSelect($event)"></date-table>
</ng-template>

<ng-template #yearModeTable>
  <month-table [prefixCls]="prefixCls" [value]="activeDate" [monthCellRender]="monthCell"
    [monthFullCellRender]="monthFullCell" (valueChange)="onDateSelect($event)"></month-table>
</ng-template>